import React, { useEffect, useState } from 'react'
import { getProList } from '../../api/pro'
import { Table, Button } from 'antd'

import ExportJsonExcel from "js-export-excel"


export default function Index() {

    const [proList, setProList] = useState([])

    useEffect(() => {
        getProList().then(res => {
            setProList(res.data)
        })
    }, [])


    const columns = [
        {
            title: '序号',
            render(t, r, i) {
                return <span>{i + 1}</span>
            }
        }, {
            title: '商品名称',
            dataIndex: 'proname'
        }
    ]

    // 配置导出规则
    const exportClick = () => {

        const option = {
            // 1. 配置导出的文件名称
            fileName: '我的导出',
            // 2. 配置导出的数据,可以导出多个工作表
            datas: [
                {
                    // 原数据
                    sheetData: proList,
                    // 工作表名称
                    sheetName: "工作表1",
                    // 需要导出的字段名
                    sheetFilter: ["proname", "proid"],
                    // 导出字段对应的标题
                    sheetHeader: ["商品名称", "商品 id"],
                    // 列宽度
                    columnWidths: [50, 20],
                }, {
                    // 原数据
                    sheetData: proList,
                    // 工作表名称
                    sheetName: "工作表2",
                    // 需要导出的字段名
                    sheetFilter: ["originprice", "category"],
                    // 导出字段对应的标题
                    sheetHeader: ["商品价格", "商品分类"],
                    // 列宽度
                    columnWidths: [20, 20],
                }
            ]
        }

        // 通过配置的 option 对象创建一个 excel 表格
        var toExcel = new ExportJsonExcel(option)
        // 将创建的 excel 保存在本地
        toExcel.saveExcel()
    }
    return (
        <div>
            <h2>  <Button onClick={exportClick}>文件导出</Button> </h2>

            <Table
                rowKey={'proid'}
                dataSource={proList}
                columns={columns}
            />
        </div>
    )
}
